<template>

  <div class="">
    <el-button @click="download">
      下载
    </el-button>
    <el-button @click="preview">
      预览
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    download() {
      const xhr = new XMLHttpRequest()
      xhr.open('get', 'http://10.124.0.50:8081/topia/TEST-funk-001/1.png', true)
      xhr.responseType = 'blob'
      xhr.send()
      xhr.onload = function () {
        if (xhr.status === 200) {
          const res = this.response
          console.log('res2', res)
          const blob = new Blob([res], { type: 'image/png' }) // 获取文件对象
          const reader = new FileReader() // 创建FileReader对象
          // 将文件读取为DataURL格式
          reader.readAsDataURL(blob)
          // 当文件读取完成时，执行以下操作
          reader.onload = (event) => {
          console.log('event', event)
            const blob = this.response
            const a = document.createElement('a')
            a.style.display = 'none'
            a.download = '文件名称.png'
            a.href = URL.createObjectURL(blob)
            document.body.appendChild(a)
            a.click()
            URL.revokeObjectURL(a.href) // 释放URL 对象
            document.body.removeChild(a)
          }
        }
      }
    },
    preview(){
      window.open('http://10.124.0.50:8081/topia/TEST-funk-001/1.png',"_blank")
    }
  }
};
</script>